{extend name="main" /}
{block name="body"}

<div id="LAY_app" class="layadmin-tabspage-none">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <!-- 头部区域 -->
            <ul id="top_menu" class="layui-nav layui-layout-left">
                <li class="layui-nav-item layadmin-flexible" lay-unselect="">
                    <a href="javascript:;" class="even_flexible" title="侧边伸缩">
                        <i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
                    </a>
                </li>


                <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                    <a href="/" target="_blank" title="前台">
                        <i class="layui-icon layui-icon-website"></i>
                    </a>
                </li>
                <li class="layui-nav-item" lay-unselect="">
                    <a href="javascript:document.getElementById('content-iframe').contentWindow.location.reload();" layadmin-event="refresh" title="刷新">
                        <i class="layui-icon layui-icon-refresh-3"></i>
                    </a>
                </li>

                <!-- 顶部菜单栏 -->
                {if !empty($menu_top)}
                {foreach $menu_top as $item}
                <li class="layui-nav-item  layui-hide-xs layui-hide-sm layui-show-md-inline-block {if $auth_pid==$item['id']} layui-this {/if}">
                    <a lay-href="" title="" href="/admin/index/index?auth_pid={$item['id']}" class="auth_top">
                        {$item['title']}
                    </a>
                </li>
                {/foreach}
                {/if}

                <li id="topdrop"  class="layui-nav-item layui-nav-dropdown " style="display: none">
                    <a href="javascript:;">
                        隐藏菜单
                    </a>
                    <dl class="layui-nav-child" >
                        <dd><a href="{:url('admin/info',['id'=>$admin_data['id']])}" target="right_content" class="close_shade">修改资料</a></dd>
                        <dd><a href="{:url('login/logout',['id'=>$admin_data['id']])}">退出登录</a></dd>
                    </dl>
                </li>

                <span class="layui-nav-bar" style="left: 198px; top: 48px; width: 0px; opacity: 0;"></span>
            </ul>
            <ul id="top_menu_right" class="layui-nav layui-layout-right">

                <li class="layui-nav-item layui-nav-dropdown " >
                    <a href="/admin/sys/clear_cache" data-title="确定要清理缓存嘛？" class="ajax_get admin_info">
                        <span>清理缓存</span>
                        <span>{$cache_file['size']|format_bytes}</span>
                    </a>
                </li>

                <li class="layui-nav-item">
                    <div class="df-jsac" style="height: 100%">
                        {if $admin_data.avatar}
                        <img src="{$admin_data.avatar}" class="head_img" onerror="this.remove()"/>
                        {/if}
                        <a href="javascript:;" class="admin_info">
                            <span>{$admin_data.username}</span>
                            {if $admin_data.role_name}
                                <span>{$admin_data.role_name}</span>
                            {/if}
                        </a>
                    </div>

                    <dl class="layui-nav-child" >
                        <dd><a href="{:url('admin/info',['id'=>$admin_data['id']])}" target="right_content" class="close_shade">修改资料</a></dd>
                        <dd><a href="{:url('login/logout',['id'=>$admin_data['id']])}">退出登录</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item layui-hide-xs" lay-unselect="">
                    <a href="javascript:;" class="right-bar"><i class="layui-icon layui-icon-more-vertical"></i></a>
                </li>
            </ul>
        </div>

        <!-- 侧边菜单 -->
        <div class="layui-side layui-side-menu">
            <div class="layui-side-scroll">
                <div class="layui-logo">
                    <a href="/admin/index/index" ><span>{~echo xn_cfg('base.sys_name','兔白白后台管理')}</span></a>
                </div>

                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
                    {foreach name="menu" item="vo"}
                    {if condition="!empty($vo['_data'])"}
                    <li data-name="" data-jump="" class="layui-nav-item ">
                        <a href="javascript:;" lay-tips="{$vo.title}">
                            <i class="layui-icon {$vo.icon}"></i> <cite>{$vo.title}</cite>
                            {if $vo['badge']!=0}<span class="layui-badge">{$vo['badge']}</span>{/if}
                            <span class="layui-nav-more"></span>
                        </a>

                        <dl class="layui-nav-child">
                            {foreach name="vo._data" item="vv"}
                            <dd>
                                {if condition="!empty($vv['_data'])"}
                                <a href="javascript:;" target="right_content">{$vv.title}</a>
                                <dl class="layui-nav-child">
                                    {foreach name="vv._data" item="v"}
                                    <dd>
                                        <a href="{:url($v['name'],['bcid'=>$vo.id.'_'.$vv.id.'_'.$v.id])}" target="right_content" class="close_shade">{$v.title} {if $v['badge']!=0}<span class="layui-badge">{$v['badge']}</span>{/if} </a>
                                    </dd>
                                    {/foreach}
                                </dl>
                                {else/}
                                <a href="{:url($vv['name'],['bcid'=>$vo.id.'_'.$vv.id])}" target="right_content" class="close_shade">{$vv.title} {if $vv['badge']!=0}<span class="layui-badge">{$vv['badge']}</span>{/if} </a>
                                {/if}
                            </dd>
                            {/foreach}
                        </dl>
                    </li>
                    {else/}
                    <li class="layui-nav-item">
                        <a href="{:url($vo['name'],['bcid'=>$vo.id])}" target="right_content" lay-tips="{$vo.title}" class="close_shade">
                            <i class="layui-icon {$vo.icon}"></i>
                            <cite>{$vo.title}</cite>
                        </a>
                    </li>
                    {/if}
                    {/foreach}
                </ul>
            </div>
        </div>

        <!-- 主体内容 -->
        <div class="layui-body" id="LAY_app_body" style="overflow-y: hidden">
            <iframe id="content-iframe" src="{:url('home')}" frameborder="0" width="100%" height="100%" name="right_content" scrolling="auto" frameborder="0" scrolling="no"></iframe>
        </div>

        <!-- 辅助元素，一般用于移动设备下遮罩 -->
        <div class="layadmin-body-shade" layadmin-event="shade"></div>

    </div>

</div>

{/block}

{block name="js"}
<script>
    //默认记录 并展开左侧栏
    $(function(){
        var index = Storage.get('layui-nav-item-menu-data');
        if(index==-1)return;
        let mySelf = $('.layui-nav-item a[target="right_content"]').eq(index)
        //设置父级菜单的点燃样式
        mySelf.parent().parents('dd').addClass('layui-nav-itemed')
        mySelf.parents('.layui-nav-item').addClass('layui-nav-itemed')
        //设置自己的点燃样式
        mySelf.parent().addClass('layui-this')
        //得到url
        $('#content-iframe').attr('src',mySelf.attr('href'));

        // automenu();//隐藏多余菜单
    })
    //点击左侧栏 记录状态
    $('.layui-nav-item a[target="right_content"]').click(function(){
        var index = $('.layui-nav-item a[target="right_content"]').index($(this));
        Storage.set('layui-nav-item-menu-data',index)
    })
    $('.auth_top').click(function(){
        Storage.set('layui-nav-item-menu-data',1)
    })
    // 点按钮触发
    $('.even_flexible').click(function () {
        sideFlexible();
    });
    //点遮罩触发
    $('.layadmin-body-shade').click(function () {
        sideFlexible();
    });
    //点菜单触发
    $('.layui-side-menu').click(function () {
        if( $('#LAY_app').attr('class').indexOf('layadmin-side-shrink')!=-1 ) {
            sideFlexible();
        }
    });


    //自定隐藏多余菜单
    function automenu() {
        //top都长度
        var topwidth = ($("#top_menu").width() + $("#top_menu").offset().left);

        //右边部分位置
        var rightwidth = $("#top_menu_right").offset().left;
        //左边大于右边，需要调整位置
        if (topwidth >= rightwidth) {
            //显示更多
            $("#topdrop").show();
            for (var i = $("#top_menu li").length -2; i > 0  ; i--) {
                var li = $("#top_menu li").eq(i);
                if ($("#topdrop .layui-nav-child dd").length == 0) {
                    $("#topdrop .layui-nav-child").append("<dd data-id=\"" + li.attr("data-id") + "\" onclick=\"loadleftMenu('" + li.attr("data-id") + "');\">" + li.html() + "</dd>");
                } else {
                    $("#topdrop .layui-nav-child dd").eq(0).before("<dd data-id=\"" + li.attr("data-id") + "\" onclick=\"loadleftMenu('" + li.attr("data-id") + "');\">" + li.html() + "</dd>");
                }
                $("#top_menu li").eq(i).remove();
                break;
            }
            automenu();
        }
    }
    // 屏幕大小改变时触发
    $(window).resize(function(){
        //sideFlexible();
        if ($("#topdrop .layui-nav-child dd").length == 0)
        {
            return;
        }
        //等待左侧动画执行完成之后
        setTimeout(function () {
            $("#topdrop").hide();
            //把隐藏的菜单全部加回去
            for (var i = 0; i < $("#topdrop .layui-nav-child dd").length; i++) {
                var dd = $("#topdrop .layui-nav-child dd").eq(i);
                $("#topdrop").before(" <li class=\"layui-nav-item\" data-id=\"" + dd.attr("data-id") + "\" onclick=\"loadleftMenu('" + dd.attr("data-id") + "');\">" + dd.html() + "</li>");
            }
            //然后清空隐藏的
            $("#topdrop .layui-nav-child dd").remove();
            //然后重新计算
            automenu();
        },500);

    });

    //显示左边菜单
    function loadleftMenu(id) {
        //左边菜单数据
        var leftMenu = [];
        for (var i = 0; i < menus.length; i++) {
            var mn = menus[i];
            if (mn.MENU_ID == id) {
                leftMenu = mn.subMenu;
                break;
            }
        }
        //左边显示第一个菜单数据
        var menu = template('left_menuTpl', { data: leftMenu });
        $('#LAY-system-side-menu').html(menu);
        if(firstLoad==true) {
            firstLoad=false;
            //左边显示样式
            if ($("#leftmenu .layui-this a").length == 1) {
                $("#leftmenu .layui-this a").click();
            } else {
                $("#leftmenu .layui-this").click();
            }

        }
        //使用init局部更新html代码为layui代码
        element.render("nav-tree");
    }

    //侧边伸缩
    function sideFlexible(){
        var app = $('#LAY_app'),
            APP_FLEXIBLE = 'LAY_app_flexible',
            iconElem =  $('#'+ APP_FLEXIBLE),
            APP_SPREAD_SM = 'layadmin-side-spread-sm',
            ICON_SHRINK = 'layui-icon-shrink-right',
            ICON_SPREAD = 'layui-icon-spread-left',
            SIDE_SHRINK = 'layadmin-side-shrink',
            screen = $(window).width(),
            isSpread = iconElem.hasClass(ICON_SPREAD);
        // console.log(isSpread);
        if(isSpread){
            //切换到展开状态的 icon，箭头：←
            iconElem.removeClass(ICON_SPREAD).addClass(ICON_SHRINK);
            //移动：从左到右位移；PC：清除多余选择器恢复默认
            if(screen < 992){
                app.addClass(APP_SPREAD_SM);
            } else {
                app.removeClass(APP_SPREAD_SM);
            }
            app.removeClass(SIDE_SHRINK)
        } else {
            //切换到搜索状态的 icon，箭头：→
            iconElem.removeClass(ICON_SHRINK).addClass(ICON_SPREAD);
            //移动：清除多余选择器恢复默认；PC：从右往左收缩
            if(screen < 992){
                app.removeClass(SIDE_SHRINK);
            } else {
                app.addClass(SIDE_SHRINK);
            }
            app.removeClass(APP_SPREAD_SM)
        }
    }

    if( $(window).width() < 992 ) {
        sideFlexible();
    }
    // 点击伸缩
    $('.close_shade').click(function () {
        if( $(window).width() < 992 ) {
            sideFlexible();
        }
    })
</script>
{/block}